<template>
  <div class="detail-container">
    <el-card>
      <el-tabs @tab-click="info">
        <el-tab-pane label="登录账户设置">
          <!-- 放置表单 -->
          <el-form
            ref="userInfo"
            label-width="120px"
            style="margin-left: 120px; margin-top:30px"
            :model="userInfo"
            :rules="rules"
          >
            <el-form-item label="姓名:" prop="username">
              <el-input v-model="userInfo.username" style="width:300px" />
            </el-form-item>
            <el-form-item label="密码:" prop="password">
              <el-input
                v-model="userInfo.password"
                style="width:300px"
                type="password"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="$router.back()">返回</el-button>
              <el-button type="primary" @click="edit">更新</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情">
          <employessInfo ref="employessInfo" />
        </el-tab-pane>
        <el-tab-pane label="岗位信息">
          <jobInfo ref="jobInfo" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import employessInfo from './components/employessInfo'
import jobInfo from './components/jobInfo'
import { getUserDetailById, saveUserDetailById } from '@/api/employee'
export default {
  name: 'Detail',
  components: {
    employessInfo,
    jobInfo
  },
  data() {
    return {
      activeName: 'second',
      userInfo: {},
      rules: {
        username: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            min: 6,
            max: 9,
            message: '密码长度在 6 到 9 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  async created() {
    // 根据ID查询员工基本信息
    const res = await getUserDetailById(this.$route.params.id)
    this.userInfo = res
  },
  methods: {
    // 更新
    edit() {
      this.$refs.userInfo.validate(async valid => {
        if (valid) {
          await saveUserDetailById(this.userInfo)
          this.$message.success('更新成功！')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // tab栏的点击事件
    info(val) {
      this.$refs.employessInfo.userInfo = this.userInfo
      this.$refs.jobInfo.userInfo = this.userInfo
    }
  }
}
</script>

<style lang="scss">
.detail-container {
  .el-input__inner:focus {
    border-color: #00a6a6 !important;
  }
  .el-tabs__item.is-active,
  .el-tabs__item:hover,
  .el-button,
  .el-pager li.active {
    color: #00a6a6;
  }

  .el-button--primary,
  .el-dialog__title,
  .el-dialog__close {
    background-color: #00a6a6;
    color: #fff;
    border-color: transparent;
  }

  .el-tabs__active-bar,
  .el-dialog__header {
    background-color: #00a6a6;
  }
  .el-button--small,
  .el-pagination {
    margin: 10px 0 13px 15px;
    float: right;
  }
}
</style>
